

$(function () {

    let $name = $('#name')
    let $drink = $('#drink')
    let $orders = $('#orders')

    function addOrder(order) {
        $orders.append(`<li class="order" id="${order.id}">
            <p>
                Name: <span class="name">${order.name}</span>
                <input type="text" class="name nonedit">
            </p>
            <p>
                Drink: <span class="drink">${order.drink}</span>
                <input type="text" class="drink nonedit">
            </p>
            <!--<button data-id="${order.id}" class="delete-order">Delete</button>
            <button data-id="${order.id}" class="edit-order">Edit</button>
            <button data-id="${order.id}" class="save-edit nonedit">Save</button>
            <button data-id="${order.id}" class="cancel-edit nonedit">Cancel</button>-->

        </li>`)
    }
    $.ajax({
        url: '/orders',
        type: 'GET',
        dataType: 'json',
        success: function (data) {
            console.log(data)
            //let orders = JSON.parse(data)这里的data已经是js对象了，而且是个对象数组
            $.each(data, function (index, order) {
                addOrder(order)
            })
        },
        error: function () {
            alert('error in GET')
        }
    })
    $('#add-order').on('click', function () {
        if($name.val() === '' || $drink.val() === ''){
            alert('Please input name and drink')
            return
        }
        $.ajax({
            url: '/orders',
            type: 'POST',
            dataType: 'json', //服务器返回的数据类型
            contentType: 'application/json', //发送的数据类型
            data: JSON.stringify({
                name: $name.val(),
                drink: $drink.val()
            }),
            success: function (data) {
                console.log(data)
                addOrder(data)
            },
            error: function () {
                alert('error in POST')
            }
        })
        //清空输入框
        $name.val('')
        $drink.val('')
    })

/*    $orders.delegate('.delete-order', 'click', function () {
        $li = $(this).closest('.order')

        $.ajax({
            url: `/orders/${$li.attr('id')}`,
            type: 'DELETE',
            success: function () {
                $li.slideUp(300, function () {
                    $li.remove() // 从DOM中移除元素，slideUp()不会移除而是添加了display:none
                })
            },
            error: function () {
                alert('error in DELETE')
            }
        })
    })

    $orders.delegate('.edit-order', 'click', function () {
        $li = $(this).closest('.order')
        $li.find('input.name').val($li.find('span.name').text())
        $li.find('input.drink').val($li.find('span.drink').text())
        $li.find('span,.edit-order').addClass('edit')
        $li.find('.nonedit').removeClass('nonedit')
    })

    $orders.delegate('.cancel-edit', 'click', function () {
        $li = $(this).closest('.order')
        $li.find('span,.edit-order').removeClass('edit')
        $li.find('input,.save-edit,.cancel-edit').addClass('nonedit')
    })

    $orders.delegate('.save-edit', 'click', function () {
        $li = $(this).closest('.order')
        $.ajax({
            url: `/orders/${$li.attr('id')}`,
            type: 'PUT',
            dataType: 'json',
            contentType: 'application/json',
            data: JSON.stringify({
                name: $li.find('input.name').val(),
                drink: $li.find('input.drink').val()
            }),
            success: function () {
                $li.find('span.name').text($li.find('input.name').val())
                $li.find('span.drink').text($li.find('input.drink').val())
                $li.find('span,.edit-order').removeClass('edit')
                $li.find('input,.save-edit,.cancel-edit').addClass('nonedit')
            },
            error: function () {
                alert('error in PUT')
            }
        })
    })*/

})
